<html><head>

<style>
h1 {
	margin: 0;
}
</style>

<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jsSO.js"></script>

<script type="text/javascript">

jsSO.connect('liveChat', 'rtmp://pro-web.at/SOSample');

// select color
var rand = Math.round(Math.random()*100000)%4;
var color = (['blue', 'red', 'green', 'black'])[rand];

// handle stage pixel updates
jsSO.onSync(function(event, updates, data) {
	if (updates.message) {
		$('pre').append('<span style="color: '+data.message.color+'">'+data.message.text+'</span>');
	}
});

$(function(){
	$('body').prepend('<h1>You are: '+color+'</h1>');

	$('textarea').focus().keyup(function(event){
		var text = $(this).val().replace(/ /g, '_').replace(/\n/g, '<br />');
		$(this).val('');
		if (!text) {
			return;
		}
		jsSO.set('message', {
			from: 'me',
			color: color,
			time: (new Date()).getTime(),
			text: text
		});
		return false;
	});
});

</script>

</head>
<body>
	<div><pre>
	</pre></div>
	<textarea></textarea>
</body>
</html>
